<template>
  <div>
    <el-dialog :visible.sync="dialogVisible"
               class="dialog-title w-[40%]"
               title="零件材料设置"
               :close-on-click-modal="false">
      <material-library-table :material-library-data="materialLibraryData" @selected-row-data="getSelectedAddItems" :clearSelectedItems="this.clearSelectedItemsFromTable"></material-library-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { materialLibraryCommand } from "../../../../command/MaterialLibraryCommand";
import MaterialLibraryTable from "./PartDocMaterialSetting/MaterialLibraryTable.vue";

export default {
  name: "MaterialSettingDialog",
  components:{MaterialLibraryTable},
  props: {
    docType: {
      type: String,
      default: null
    },
    docId: {
      type: String,
      default: null
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      visible: true,
      materialLibraryData: [],
      selectedAddMaterialItems:[],
      clearSelectedItemsFromTable:true,
    }
  },
  mounted() {
    this.getMaterialLibraryData();
  },
  methods: {
    cancel() {
      this.$emit('close-dialog',false);
      this.clearSelectedItemsFromTable = !this.clearSelectedItemsFromTable;
    },
    confirm() {
      this.$emit('confirm-dialog',this.selectedAddMaterialItems);
      this.selectedAddMaterialItems = [];
      this.clearSelectedItemsFromTable = !this.clearSelectedItemsFromTable;
    },
    getMaterialLibraryData() {
      materialLibraryCommand.getMaterialLibraryDate(res => {
        this.materialLibraryData = res;
      });
    },
    getSelectedAddItems(val){
      this.selectedAddMaterialItems = [];
      this.selectedAddMaterialItems = val;
    }
  },
}
</script>

<style scoped>
>>> .el-dialog__body{
  padding: 15px !important;
}
</style>